<template>
  <div id="app ">
    <div id="map">

    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import L from 'leaflet';
import {tiledMapLayer} from '@supermap/iclient-leaflet';
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted(){
    var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
    var map = L.map('map', {
      crs: L.CRS.EPSG4326,
      center: [0, 0],
      maxZoom: 18,
      zoom: 1
    });
    L.supermap.tiledMapLayer(url).addTo(map);
    var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
    plottingLayer.addTo(map);
    // var drawControl = L.supermap.plotting.drawControl(plottingLayer);
    // drawControl.addTo(map);
    // var editControl = L.supermap.plotting.editControl();
    // editControl.addTo(map);
    // L.supermap.plotting.initPlotPanel("plotPanel", serverUrl, drawControl);
    // L.supermap.plotting.initStylePanel("stylePanel", serverUrl, editControl);

    var plotting = L.supermap.plotting.getControl(map, serverUrl);

    map.on('contextmenu', function (event) {
      drawControl.handler.disable();

      if(editControl.canPaste()){
        var contentMe = document.getElementById("contentMe");
        contentMe.style.top = event.originalEvent.clientY + "px";
        contentMe.style.left = event.originalEvent.clientX + "px";
        contentMe.style.display = "block";
        document.getElementById("paste").onclick = function(){
          editControl.paste(event.latlng);
        };
      }
    }).on('mousemove', function (event) {
      contentMe.style.display = "none";
    });

    //取消标绘
    function cancelDraw() {
      drawControl.handler.disable();
    }

    //清空绘制
    function clearLayer() {
      cancelDraw();

      for(var i = 0; i < map.getPlottingLayers().length; i++){
        map.getPlottingLayers()[i].removeAllFeatures();
      }
    }

    //删除选中标号
    function deleteSymbol() {
      editControl.deleteSelectedFeatures();
    }

    //复制
    function copySymbol() {
      editControl.copy();
    }

    //剪切
    function cutSymbol() {
      editControl.cut();
    }

    //粘贴
    function pasteSymbol() {
      editControl.paste();
    }

    //添加图层
    function addPlottingLayer() {
      cancelDraw();

      var plottingLayerName = "plottingLayer_" + Math.ceil(Math.random() * 1000);
      var plottingLayerNew = L.supermap.plotting.plottingLayer(plottingLayerName, serverUrl);
      drawControl.setDrawingLayer(plottingLayerNew);
      plottingLayerNew.addTo(map);

      alert("标绘图层"+plottingLayerNew.name+"增加成功!");
    }

    //保存态势图
    function saveSimulationMap() {
      cancelDraw();
      plotting.getSitDataManager().saveAsSmlFile("situationMap");
    }

    function loadSimulationMap() {
      plotting.getSitDataManager().openSmlFileOnServer("situationMap", function(evt){
        drawControl.setDrawingLayer(evt.sitDataLayers[0]);
      });
    }

    function editCircusRetangle() {
      editControl.setEditMode(SuperMap.Plot.EditMode.EDITCIRCUMRECTANGLE);
    }

    function editContorPoints() {
      editControl.setEditMode(SuperMap.Plot.EditMode.EDITCONTROLPOINT);
    }

    function addControlPoints() {
      editControl.setEditMode(SuperMap.Plot.EditMode.ADDCONTROLPOINT);
    }
    function removeControlPoints(){
      editControl.setEditMode(SuperMap.Plot.EditMode.REMOVECONTROLPOINT);
    }
    //切换多选模式
    function multiSelectModel() {
      editControl.multiSelect();
    }

    //多选对齐--左对齐
    function setSymbolAlighLeft() {
      editControl.align(SuperMap.Plot.AlignType.LEFT);
    }

    //多选对齐--右对齐
    function setSymbolAlighRight() {
      editControl.align(SuperMap.Plot.AlignType.RIGHT);
    }

    //多选对齐--上对齐
    function setSymbolAlighUp() {
      editControl.align(SuperMap.Plot.AlignType.UP);
    }

    //多选对齐--下对齐
    function setSymbolAlighDown() {
      editControl.align(SuperMap.Plot.AlignType.DOWN);
    }

    //多选对齐--竖直居中对齐
    function setSymbolAlighVerticalcenter() {
      editControl.align(SuperMap.Plot.AlignType.VERTICALCENTER);
    }

    //多选对齐--水平居中对齐
    function setSymbolAlighHorizontalcenter() {
      editControl.align(SuperMap.Plot.AlignType.HORIZONTALCENTER);
    }

    //切换图层是否锁定
    function setPlottingLayerIsLocked() {
      if (plottingLayer.getLocked() === true) {
        plottingLayer.setLocked(false);
      } else {
        plottingLayer.setLocked(true);
      }
    }

    //切换图层是否可编辑模式
    function setPlottingLayerIsEdit() {
      if (plottingLayer.getEditable() === true) {
        plottingLayer.setEditable(false);
      } else {
        plottingLayer.setEditable(true);
      }
    }

    //切换图层是否可选择模式
    function setPlottingLayerIsSelected() {
      if (plottingLayer.getSelected() === true) {
        plottingLayer.setSelected(false);
      } else {
        plottingLayer.setSelected(true);
      }
    }

    function drawAvoidRegion(){
      if (editControl._avoidEditing === false && editControl.getSelectedFeatures().length === 0) {
        return;
      }else{
        editControl.avoidEdit(true);
      }
    }
    function doneAvoidEdit(){
      editControl.avoidEdit(false);
    }
    function deleteAvoidEdit(){
      if (editControl._avoidEditing === false && editControl.getSelectedFeatures().length === 0) {
        return ;
      }else if(editControl._avoidEditing === true){
        editControl.avoidEdit(false);
        editControl.getSelectedFeatures()[0].removeAvoidRegions();
      }
    }

    //创建组合对象
    function createGroupObjects() {
      var features = editControl.getSelectedFeatures();
      if (features.length >= 2) {
        var groupObject = plottingLayer.createGroupObject(features);
        if(!!groupObject){
          editControl.selectFeatures(groupObject);
        }
        var feature = plottingLayer.features[plottingLayer.features.length-1];
        var transaction = new SuperMap.Plot.Transaction();
        transaction.transType = SuperMap.Plot.TransactionType.EDIT;
        var transInfo = new SuperMap.Plot.TransactionInfo();
        transInfo.layerId = plottingLayer._leaflet_id;
        transInfo.uuid = feature.uuid;
        transInfo.functionName = "createGroupObject";
        transInfo.undoParams = [feature];
        transInfo.redoParams = [features];
        transaction.transInfos.push(transInfo);
        L.supermap.plotting.getControl().getTransManager().add(transaction);
      }

    }

    //创建多旗
    function createDrawFlags() {
      var features = editControl.getSelectedFeatures();
      if (features.length >= 2) {
        var flagObject = plottingLayer.createFlags(features);
        if(!!flagObject){
          editControl.selectFeatures(flagObject);
        }
        var transaction = new SuperMap.Plot.Transaction();
        transaction.transType = SuperMap.Plot.TransactionType.EDIT;
        var transInfo = new SuperMap.Plot.TransactionInfo();
        transInfo.layerId = flagObject.layer._leaflet_id;
        transInfo.uuid = flagObject.uuid;
        transInfo.functionName = "createFlags";
        transInfo.undoParams = [flagObject];
        transInfo.redoParams = [features];
        transaction.transInfos.push(transInfo);
        L.supermap.plotting.getControl().getTransManager().add(transaction);
      }
    }

    //解绑组合对象
    function unGroupObject() {
      var features = editControl.getSelectedFeatures();
      for (var i = features.length - 1; i >= 0; i--) {
        if (features[i] instanceof L.supermap.plotting.GroupObject) {
          var subLayers = plottingLayer.unGroupObject(features[i]);
          editControl.selectFeatures(subLayers);
        }

      }
    }

    function undo(){
      editControl.avoidEdit(false);
      plotting.getTransManager().undo();
      editControl.fire(SuperMap.Plot.Event.featuresmodified);//刷新属性面板
    }

    function redo(){
      editControl.avoidEdit(false);
      plotting.getTransManager().redo();
      editControl.fire(SuperMap.Plot.Event.featuresmodified);//刷新属性面板
    }

    //等大
    //等宽
    function setSymbolEqualWidth(){
      editControl.equalLarge(SuperMap.Plot.EqualLargeType.WIDTH);
    }
    //等高
    function setSymbolEqualHeight(){
      editControl.equalLarge(SuperMap.Plot.EqualLargeType.HEIGHT);
    }
    //等宽高
    function setSymbolEqualWidthHeight(){
      editControl.equalLarge(SuperMap.Plot.EqualLargeType.SAME);
    }

    //均匀分布
    //横向均匀分布
    function setSymbolLevelDistribution(){
      editControl.uniformDistribution(SuperMap.Plot.UniformDistributionType.LEVEL);
    }

    //纵向均匀分布
    function setSymbolVerticalDistribution(){
      editControl.uniformDistribution(SuperMap.Plot.UniformDistributionType.VERTICAL);
    }

    document.onkeydown = function (event) {
      var event = event || window.event;
      if(event && event.keyCode === 46){//Delete键
        editControl.deleteSelectedFeatures();
      }
    }

    // document.oncontextmenu = function (event) {
    //     var event = event || window.event;
    //     if(event.button == 2){
    //         drawControl.handler.disable();
    //     }
    // }

  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
